<template>
	<view class="service-title">
		服务包管理
	</view>

	<!-- 服务包列表容器 -->
	<view class="servicepack-list" v-for="item in serviceAllCard" :key="item._id">
		<view class="servicepack-card">
			<view class="cardone-left">
				<image class="service-icon" :src="item.servicePackId?.image">
				</image>
			</view>
			<view class="cardone-middle">
				<text class="servicename">{{ item.servicePackId?.type }}</text>
				<text class="service-tag">基础医疗</text>
			</view>
			<view class="price">
				<text class="price-value">￥{{ item.servicePackId?.price }}</text>
			</view>
		</view>
	</view>
</template>
<script setup>
import {
	onMounted,
	ref
} from 'vue';
import {
	getAervicespackApi
} from '../../api/organizations';

const serviceAllCard = ref([]);
// 页数和条数
const pageData = ref({
	currentPage: 1,
	pageSize: 5,
});
onMounted(() => {
	getAervicespack();
});
// // 查询服务记录  机构主页的服务包/services/search
async function getAervicespack() {
	console.log('请求查询服务记录 数据...');
	const res = await getAervicespackApi({
		...pageData.value,
	});
	if (res.code === 200) {
		console.log('查询服务记录 数据获取成功:', res.data.rows.length, '条');
		serviceAllCard.value = res.data.rows;
	} else {
		console.error('请求失败:', res.message);
	}
}
</script>
<style scoped lang="scss">
/* 服务包管理 */
.servicepack-list {
	padding: 15px 10px;
}

.service-title {
	font-size: 16px;
	font-weight: bold;
	color: #333;
	padding-left: 8px;
	margin-bottom: 10px;
}

.servicepack-card {
	display: flex;
	align-items: center;
	background-color: #fff;
	border-radius: 8px;
	padding: 15px;
	margin-bottom: 10px;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.cardone-left .service-icon {
	width: 48px;
	height: 48px;
	margin-right: 12px;
	border-radius: 4px;
}

.cardone-middle {
	flex: 1;
	min-width: 0;
}

.servicename {
	font-size: 16px;
	font-weight: 500;
	color: #333;
	line-height: 1.4;
	margin-bottom: 4px;
	display: block;
}

.service-tag {
	display: inline-block;
	padding: 2px 6px;
	background-color: #f0f7ff;
	color: #2984f8;
	border-radius: 4px;
	font-size: 12px;
	margin-top: 4px;
}

.price {
	margin-left: 15px;
	text-align: right;
}

.price-value {
	color: red;
	font-size: 16px;
	font-weight: bold;
}
</style>